<template>
  <div class="item van-hairline--bottom">
    <div
      @click="$emit('shareItemClick', item.id)"
      class="title van-multi-ellipsis--l2"
      v-html="item.title"
    ></div>
    <div @click="$emit('shareItemClick', item.id)" class="content ">
      {{ item.content }}
    </div>
    <div class="info-box">
      <div class="userinfo">
        <img :src="item.author.avatar" alt="" />
        <span>{{ item.author.nickname }}</span>
      </div>
      <div class="time">{{ item.created_at | formatTime }}</div>
      <div class="mes">
        <i class="iconfont iconicon_pinglunliang"></i>
        <span>{{ item.article_comments }}</span>
      </div>
      <div class="zan">
        <i
          class="iconfont iconbtn_dianzan_small_nor"
          :class="{ actived: starArticles.includes(item.id) }"
          @click="star"
        ></i>
        <span>{{ item.star }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import { starArticle } from '../../api/api'
export default {
  name: 'share-item',
  props: {
    item: {
      type: Object
    }
  },
  computed: {
    ...mapGetters(['starArticles']),
    activated () {
      return this.starArticles.includes(this.item.id)
    }
  },
  methods: {
    // 合并vuex中的方法
    ...mapMutations(['SETSTARARTICLES']),
    // 点赞
    async star () {
      const starRes = await starArticle({
        article: this.item.id
      })
      // 修改vuex中的数据
      this.SETSTARARTICLES(starRes.data.list)
      this.item.star = starRes.data.num
      this.$toast.success('点赞成功')
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  padding-top: 16px;
  padding-bottom: 28px;
  .title {
    font-size: 16px;
    color: @fontColor;
    margin-bottom: 12px;
  }
  .content {
    color: @secFontColor;
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .info-box {
    margin-top: 20px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: @minorFontColor;
    .userinfo {
      flex: 1;
      display: flex;
      align-items: center;
    }
    img {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .time {
      margin-right: 21px;
    }
    .mes {
      margin-right: 23px;
    }
    .iconfont {
      margin-right: 7px;
    }
    .mes,
    .zan {
      display: flex;
      align-items: center;
    }
  }
}
</style>
